<template>
	<view class="content">
		<div class="swiperDiv">
			<div class="personal">
				<div class="photo">
					<image src="../../static/common/img7.jpg" mode="" class="img"></image>
				</div>
				<div class="personalDiv w60">
					<image src="../../static/common/img5.png" mode="" class="img"></image>
					<span class="title">医生姓名</span>
					<div class="name">程晓波</div>
				</div>
				<div class="personalDiv">
					<div style="margin-left:40rpx">
						医生职称
					</div>
					<div class="name">主任医师</div>
				</div>
				<div class="personalDiv">
					<image src="../../static/common/img13.png" mode="" class="img"></image>
					<span class="title">就诊科室</span>
					<div class="name">心脏内科</div>
				</div>
				<div class="personalDiv">
					<image src="../../static/common/img14.png" mode="" class="img"></image>
					<span class="title">日期</span>
					<div class="name">2021-10-21 周四 上午8:00～8:30</div>
				</div>
				<div class="personalDiv noBor">
					<image src="../../static/common/img15.png" mode="" class="img"></image>
					<span class="title">挂号金额</span>
					<div class="name">￥ 81.00</div>
				</div>
			</div>
		</div>
		<div class="bot-msg">
			<div class="botMsgDiv add" v-if="data.length<5"
			@click="addCard"
			>
				<image src="../../static/common/img9.png" mode="" class="img"></image>
				添加就诊人信息
			</div>
			<div :class="item.isActive?'botMsgDiv active':'botMsgDiv'" v-for="(item,index) in data" :key="index"
				@click="clickBock(index)">
				<uni-row>
					<uni-col :span="6">
						<image src="../../static/head.png" mode="" class="img"></image>
					</uni-col>
					<uni-col :span="14">
						<div>
							<span class="span1">{{item.name}}</span>
							<span :class="item.isActive?'span2 span2Active':'span2'">健康卡</span>
						</div>
					</uni-col>
					<uni-col :span="4">
						<div>
							<radio value="r1" :checked="item.isActive" :color="'#1648CE'" />
						</div>
					</uni-col>
				</uni-row>
			</div>
			<div class="botton">
				<button type="primary" @click="submit" class="my-btn">挂 号</button>
			</div>
		</div>
	</view>

</template>

<script>
	export default {

		data() {
			return {

				data: [{
						name: "张三三",
						isActive: false
					},
					{
						name: "张三三",
						isActive: false
					},
					{
						name: "张三三",
						isActive: false
					},
					{
						name: "张三三",
						isActive: false
					}
					
				],
			}
		},
		onShow() {

		},
		onLoad(options) {
			console.log(options, "options")

		},
		methods: {
			clickBock(val) {
				this.data.forEach((item, index) => {
					if (val == index) {
						item.isActive = true
					} else {
						item.isActive = false
					}
				})
			},
			submit() {
				this.$common.navigateTo("/pages/register/order")
			},
			addCard(){
				this.$common.navigateTo("/pages/card/add")
			},
			queryList(pageNo, pageSize) {
				this.$refs.paging.complete(this.list);

			}
		},
		mounted() {

		}
	}
</script>

<style scoped>
	.swiperDiv {
		height: 900rpx;
		background-color: #1648ce;
	}

	.bot-msg {
		position: absolute;
		top: 800rpx;
		width: 100%;
		height: calc(100% - 800rpx);
		background-color: #fff;
		border-top-right-radius: 70rpx;
	}

	.personal {
		position: relative;
		padding: 0 36rpx;
		color: #fff;
		font-size: 28rpx;
		letter-spacing: 2rpx;
	}

	.photo {
		position: absolute;
		top: 40rpx;
		right: 40rpx;
	}

	.photo .img {
		width: 204rpx;
		height: 240rpx;
		border-radius: 24rpx;
	}

	.personalDiv .img {
		width: 36rpx;
		height: 36rpx;
		vertical-align: middle;
		margin-bottom: 6rpx;
		/* margin-right: 4rpx; */
	}

	.personalDiv .title {
		margin-left: 14rpx;
	}

	.personal .name {
		/* margin-left: 42rpx;
		margin-top: 12rpx; */
		font-size: 32rpx;
		font-weight: 600;
		margin: 12rpx 0rpx 24rpx 42rpx;
	}

	.personalDiv {
		padding-top: 36rpx;
		border-bottom: 4rpx solid rgba(229, 229, 229, 0.1);
	}

	.botMsgDiv {
		width: 94%;
		margin: 0 auto;
		margin-top: 36rpx;
		height: 180rpx;
		line-height: 180rpx;
		background: #F4F5FA;
		border: 4rpx solid #F4F5FA;
		border-radius: 24px;
	}

	.botMsgDiv .img {
		width: 112rpx;
		height: 112rpx;
		padding-left: 48rpx;
		vertical-align: middle;
	}

	.botMsgDiv .span1 {
		color: #666666;
		font-size: 32rpx;
		font-weight: 600;
		margin-right: 24rpx;
	}

	.botMsgDiv .span2 {
		color: #666666;
		font-size: 24rpx;
		display: inline-block;
		width: 96rpx;
		height: 44rpx;
		line-height: 44rpx;
		text-align: center;
		background: rgba(102, 102, 102, 0.1);
		border-radius: 0px 12px 0px 12px;
	}

	.add {
		color: #1648CE;
		font-size: 32rpx;
		font-weight: 600;
		height: 108rpx;
		line-height: 108rpx;
		text-align: center;
		background-color: #fff;
		border-radius: 12px 12px 12px 12px;
		border: 4rpx solid #1648CE;
	}

	.add .img {
		width: 32rpx;
		height: 32rpx;
		vertical-align: middle;
		margin-bottom: 4rpx;
		margin-right: 4rpx;
	}

	.active {
		color: #1648CE;
		border-radius: 12px;
		border: 4rpx solid #1648CE;
	}

	.span2Active {
		color: #fff !important;
		background-color: #1648CE !important;
	}

	.noBor {
		border-bottom: none;
	}

	.w60 {
		width: 60%;
	}

	
</style>